<template>
	<div class="rqfx-box">
		<navBread />

		<!-- 查询条件 -->
		<section class="search-box">
			<div class="m-title">查询条件</div>
			<div class="slider-box">
				<img src="../../assets/img/searchtiao.png" alt="" />
			</div>
			<div class="sjd-box">
				<div class="title">
					<img src="../../assets/img/sjd.png" alt="" />
					<span style="margin-left: 10px">时间段：</span>
				</div>
				<div class="sjd">
					<span class="sjdwz" :class="{ active: yearIndex == index }" v-for="(item, index) in yearList" :key="index" @click="handleYear(item, index)">
						{{ item }}
					</span>
				</div>
			</div>

			<div class="sjd-box">
				<div class="title">
					<img src="../../assets/img/jjr.png" alt="" />
					<span style="margin-left: 10px">节假日：</span>
				</div>
				<div class="sjd">
					<span
						class="sjdwz"
						:class="{ active: holidayIndex == index }"
						v-for="(item, index) in holidayList"
						:key="index"
						@click="handleHoliday(item, index)"
					>
						{{ item }}
					</span>
				</div>
				<el-button style="float: right" type="primary" @click="">查询</el-button>
			</div>
		</section>

		<section class="section-box">
			<div class="section-left">
				<div class="m-title">高速重要路口</div>
				<div class="mapimg">
					<!-- <img src="../../assets/img/relitu.png" alt="" style="width: 100%; height: 100%" /> -->
					<div class="map-container" id="containerT" style="border-radius: 40px"></div>
				</div>
				<div class="map-type" style="z-index: 99999">
					<div
						class="map-type-btn"
						v-for="(item, index) in mapTypeList"
						:key="item.id"
						@click="handleIndex(item, index)"
						:class="{ active: activeIndex == index }"
					>
						<img :src="activeIndex == index ? item.img : item.img1" alt="" />
						<span>{{ item.name }}</span>
					</div>
				</div>
				<div class="map-type1" style="z-index: 999999;">
					<div @click="home">
						<img src="../../assets/img/dingwe.png" alt="" />
					</div>
					<div @click="zoomIn">
						<img src="../../assets/img/jia.png" alt="" />
					</div>
					<div @click="zoomOut">
						<img src="../../assets/img/jian.png" alt="" />
					</div>
				</div>
			</div>
			<div class="section-right">
				<div class="m-title">景区停车场分析</div>
				<div style="height: 100px; display: flex; justify-content: space-between; align-items: center">
					<div class="item-box1">
						<span class="title">停车总次数</span>
						<div class="nubox">
							<span class="num">1</span>
							<span class="num">3</span>
							<span class="num">5</span>
							<span class="unit">万车次</span>
						</div>
					</div>
					<img style="width: 81px; height: 76px" src="../../assets/img/l11.png" alt="" />
				</div>
				<div style="display: flex; padding: 10px 3px; background-color: #ceebef; color: rgb(50, 65, 87); border-radius: 4px">
					<div style="width: 25%">景点</div>
					<div style="width: 25%">车流量</div>
					<div style="width: 25%">车辆密度</div>
					<div style="width: 25%">均停留（分）</div>
				</div>
				<div style="display: flex; padding: 10px 3px; background-color: #f2fafb; border-radius: 4px" v-for="item in 10">
					<div style="width: 25%">XXXX</div>
					<div style="width: 25%">48000</div>
					<div style="width: 25%">2.25</div>
					<div style="width: 25%">6.69</div>
				</div>
			</div>
		</section>

		<section class="section-box section3">
			<div class="section-left">
				<div class="m-title">港口年度车流量分析</div>
				<div id="chart1" class="chart1" ref="chart1"></div>
			</div>
			<div class="section-right">
				<div class="m-title">各港口车流占比</div>
				<div id="chart2" class="chart2" ref="chart2"></div>
			</div>
		</section>

		<section class="section4">
			<div class="m-title">港口车流热力图</div>
			<div id="chart5" style="width: 100%; height: 280px" ref="chart5"></div>
		</section>

		<section class="section-box section5">
			<div class="section-item">
				<div class="m-title">车流主要来源省份</div>
				<div id="chart3" class="chart3" ref="chart3"></div>
			</div>
			<div class="section-item">
				<div class="m-title">港口航次运行占比</div>
				<div id="chart6" class="chart3" ref="chart6"></div>
			</div>
			<div class="section-item">
				<div class="m-title">车型轮渡对比</div>
				<div id="chart4" class="chart3" ref="chart4"></div>
			</div>
			<div class="section-item">
				<div class="m-title">近三年主要景点到达车次</div>
				<div id="chart7" class="chart3" ref="chart7"></div>
			</div>
		</section>

		<section class="section6">
			<div class="section-item">
				<div class="m-title">港口年度车流量分析</div>

				<div id="chart8" class="chart8" ref="chart8"></div>
			</div>
			<div class="section-item">
				<div class="m-title">近三年港口各航次车流对比</div>
				<div id="chart9" class="chart8" ref="chart9"></div>
				
			</div>
		</section>

		<section class="section-box section7">
			<div class="section-left">
				<div class="m-title">港口年度车流量预测</div>
				<div style="display: flex; align-items: center; justify-content: center">
					<div class="box1">2018年</div>
					<div class="box2">2019年</div>
					<div class="box3">2020年</div>
					<div class="box1">2021年</div>
					<div class="box4">预测流量</div>
				</div>
				<div id="chart12" style="width: 100%; height: calc(100% - 70px)" ref="chart12"></div>
			</div>
			<div class="section-right">
				<div class="m-title">全年预测报告</div>
				<div style="color: rgb(50, 65, 87); font-size: 20px">全年预测报告</div>
				<div style="margin: 10px 50px; font-size: 20px; text-align: left">
					预计2021年游客数量将稳步保持11.2%的增长， 游客总数将达到1359万上下。美龄宫景点依然是 游客游览的核心景点，预计全年将接待游客560
					万。江苏省依然是来访游客最多的省份，而OTA 将成为最主要的游客来源渠道，最繁忙的月份是5 月、9月和10月。
				</div>
				<div style="background-color: rgb(50, 65, 87); color: #ffffff; width: 100px; padding: 10px; border-radius: 4px; margin: 30px auto 0">查看详情</div>
			</div>
		</section>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import navBread from '@/components/navBread.vue';

import 'ol/ol.css';
import { Map, View } from 'ol'; //地图,视图
import { defaults as defaultControls } from 'ol/control'; // 引入默认控件集合
import Zoom from 'ol/control/Zoom';
import XYZ from 'ol/source/XYZ';
import TileLayer from 'ol/layer/Tile'; //可以理解为图层
export default {
	components: {
		navBread,
	},
	data() {
		return {
			yearList: ['近五年', '近三年', '上一年', '近一年'],
			yearIndex: 0,
			holidayList: ['春节', '元宵节', '清明节', '端午节', '中秋节', '国庆节', '劳动节', '教师节', '元旦'],
			holidayIndex: 0,
			map: null,
		};
	},

	mounted() {
		this.createMap();
		this.getChart1();
		this.getChart2();
		this.getChart3();
		this.getChart4();
		this.getChart5();
		this.getChart6();
		this.getChart7();
		this.getChart8();
		this.getChart9();
		this.getChart12();
		this.getChart13();
		this.getChart14();
	},

	methods: {
		zoomIn() {
			if (this.tMap) {
				this.tMap.zoomIn(); // 每次放大一级
			}
		},
		zoomOut() {
			if (this.tMap) {
				this.tMap.zoomOut(); // 每次缩小一级
			}
		},
		home() {
			this.createMap();
		},
		// 创建地图
		createMap() {
			const T = window.T;
			// 3.初始化地图对象
			this.tMap = new T.Map('containerT', {});
			// 4.设置显示地图的中心点和级别
			this.tMap.centerAndZoom(new T.LngLat(110.145386,20.283644), 13);
			// 5.创建地图类型控件
			const ctrl = new T.Control.MapType([
				{
					title: '地图',
					icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', //地图控件上所要显示的图层图标（默认图标大小80x80）
					layer: window.TMAP_NORMAL_MAP,
				},
				// {
				// 	title: '卫星',
				// 	icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
				// 	layer: window.TMAP_SATELLITE_MAP,
				// },
			]);

			// 随机向地图添加25个标注
			var bounds = this.tMap.getBounds();
			var sw = bounds.getSouthWest();
			var ne = bounds.getNorthEast();
			var lngSpan = Math.abs(sw.lng - ne.lng);
			var latSpan = Math.abs(ne.lat - sw.lat);
			for (var i = 0; i < 5; i++) {
				var point = new T.LngLat(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
				var marker = new T.Marker(point); // 创建标注
				this.tMap.addOverLay(marker);
			}
			this.tMap.checkResize();
		},

		handleYear(item, index) {
			this.yearIndex = index;
		},
		handleHoliday(item, index) {
			this.holidayIndex = index;
		},

		getChart1() {
			const myChart = echarts.init(this.$refs.chart1);
			const option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985',
						},
					},
				},
				legend: {
					show: false,
					data: [],
				},

				grid: {
					top: '10%',
					left: '0%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: [
					{
						type: 'category',
						boundaryGap: false,
						axisLabel: {
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
					},
				],
				yAxis: [
					{
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#E5E5E5',
							},
						},
						axisLabel: {
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
					},
				],
				series: [
					{
						name: 'Line 3',
						type: 'line',
						stack: 'Total',
						smooth: true,
						lineStyle: {
							width: 0,
						},
						showSymbol: false,
						areaStyle: {
							opacity: 0.8,
							color: 'transparent',
						},
						emphasis: {
							focus: 'series',
						},
						data: [320, 132, 201, 334, 190, 130, 220],
					},
					{
						name: 'Line 4',
						type: 'line',
						stack: 'Total',
						smooth: true,
						lineStyle: {
							width: 0,
						},
						showSymbol: false,
						areaStyle: {
							opacity: 0.8,
							color: '#E7F5F6',
						},
						emphasis: {
							focus: 'series',
						},
						data: [220, 402, 231, 134, 190, 230, 120],
					},
					{
						type: 'line',
						smooth: true,
						itemStyle: {
							normal: {
								color: '#079AAE',
							},
						},
						label: {
							normal: {
								show: false,
								color: 'red',
								position: 'top',
							},
						},
						data: [10, 52, 200, 334, 390, 330],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},
		getChart12() {
			const myChart = echarts.init(this.$refs.chart12);
			const option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985',
						},
					},
				},
				legend: {
					show: false,
					data: [],
				},

				grid: {
					top: '10%',
					left: '0%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: [
					{
						type: 'category',
						boundaryGap: false,
						axisLabel: {
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
					},
				],
				yAxis: [
					{
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#E5E5E5',
							},
						},
						axisLabel: {
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
					},
				],
				series: [
					{
						name: 'Line 3',
						type: 'line',
						stack: 'Total',
						smooth: true,
						lineStyle: {
							width: 0,
						},
						showSymbol: false,
						areaStyle: {
							opacity: 0.8,
							color: 'transparent',
						},
						emphasis: {
							focus: 'series',
						},
						data: [320, 132, 201, 334, 190, 130, 220],
					},
					{
						name: 'Line 4',
						type: 'line',
						stack: 'Total',
						smooth: true,
						lineStyle: {
							width: 0,
						},
						showSymbol: false,
						areaStyle: {
							opacity: 0.8,
							color: '#E7F5F6',
						},
						emphasis: {
							focus: 'series',
						},
						data: [220, 402, 231, 134, 190, 230, 120],
					},
					{
						type: 'line',
						smooth: true,
						itemStyle: {
							normal: {
								color: '#079AAE',
							},
						},
						label: {
							normal: {
								show: false,
								color: 'red',
								position: 'top',
							},
						},
						data: [10, 52, 200, 334, 390, 330],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart2() {
			const myChart = echarts.init(this.$refs.chart2);
			const option = {
				title: {
					show: true,
					text: '125',
					subtext: '万车次',
					textStyle: {
						fontSize: 27,
						color: '#666666',
						fontWeight: 400,
					},
					subtextStyle: {
						fontSize: 18,
						color: '#666666',
						fontWeight: 500,
					},
					textAlign: 'center', //图例文字居中显示
					x: '49%', //距离左边的距离
					y: '41%', //距离上边的距离
				},

				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				color: ['#5E5CBA', '#FEAD54', '#5DE2C1', 'rgb(50, 65, 87)', '#5E5CBA'],
				series: [
					{
						type: 'pie',
						radius: ['40%', '55%'],
						avoidLabelOverlap: true,
						label: {
							normal: {
								show: true,
								color: '#666666',
								formatter: '{b} \n  {d}%', // 显示百分比，
							},
							emphasis: {
								show: true,
							},
						},
						labelLine: {
							normal: {
								show: true,
								length: 10,
								length2: 10,
							},
						},
						tooltip: {
							formatter(params) {
								return params.name + '  ' + params.value + '  ' + params.percent + '%';
							},
						},
						data: [
							{ value: 22, name: 'XXXX' },
							{ value: 25, name: 'XXXX' },
							{ value: 34, name: 'XXXXXXXX' },
							{ value: 30, name: 'XXXX' },
						],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},
		getChart3() {
			const myChart = echarts.init(this.$refs.chart3);
			const option = {
				title: {
					show: true,
					text: '152',
					subtext: '万车次',
					textStyle: {
						fontSize: 27,
						color: '#666666',
						fontWeight: 400,
					},
					subtextStyle: {
						fontSize: 18,
						color: '#666666',
						fontWeight: 500,
					},
					textAlign: 'center', //图例文字居中显示
					x: '49%', //距离左边的距离
					y: '41%', //距离上边的距离
				},

				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				color: ['#5E5CBA', '#FEAD54', '#5DE2C1', 'rgb(50, 65, 87)', '#5E5CBA'],
				series: [
					{
						type: 'pie',
						radius: ['40%', '55%'],
						avoidLabelOverlap: true,
						label: {
							normal: {
								show: true,
								color: '#666666',
								formatter: '{b} \n  {d}%', // 显示百分比，
							},
							emphasis: {
								show: true,
							},
						},
						labelLine: {
							normal: {
								show: true,
								length: 10,
								length2: 10,
							},
						},
						tooltip: {
							formatter(params) {
								return params.name + '  ' + params.value + '  ' + params.percent + '%';
							},
						},
						data: [
							{ value: 22, name: '浙江省' },
							{ value: 25, name: '江苏省' },
							{ value: 34, name: '广东省' },
							{ value: 30, name: '安徽省' },
							{ value: 30, name: '其他省份' },
						],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},
		getChart4() {
			const myChart = echarts.init(this.$refs.chart4);
			const option = {
				title: {
					show: true,
					text: '152',
					subtext: '万车次',
					textStyle: {
						fontSize: 27,
						color: '#666666',
						fontWeight: 400,
					},
					subtextStyle: {
						fontSize: 18,
						color: '#666666',
						fontWeight: 500,
					},
					textAlign: 'center', //图例文字居中显示
					x: '49%', //距离左边的距离
					y: '41%', //距离上边的距离
				},

				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				color: ['#5E5CBA', '#FEAD54'],
				series: [
					{
						type: 'pie',
						radius: ['40%', '55%'],
						avoidLabelOverlap: true,
						label: {
							normal: {
								show: true,
								color: '#666666',
								formatter: '{b} \n  {d}%', // 显示百分比，
							},
							emphasis: {
								show: true,
							},
						},
						labelLine: {
							normal: {
								show: true,
								length: 10,
								length2: 10,
							},
						},
						tooltip: {
							formatter(params) {
								return params.name + '  ' + params.value + '  ' + params.percent + '%';
							},
						},
						data: [
							{ value: 98, name: '燃油车' },
							{ value: 2, name: '新能源' }
						],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},
		getChart5() {
			var chartDom = document.getElementById('chart5');
			var myChart = echarts.init(chartDom);
			var option;

			function getVirtualData(year) {
				const date = +echarts.time.parse(year + '-01-01');
				const end = +echarts.time.parse(+year + 1 + '-01-01');
				const dayTime = 3600 * 24 * 1000;
				const data = [];
				for (let time = date; time < end; time += dayTime) {
					data.push([echarts.time.format(time, '{yyyy}-{MM}-{dd}', false), Math.floor(Math.random() * 10000)]);
				}
				return data;
			}
			option = {
				tooltip: {},
				visualMap: {
					min: 0,
					max: 10000,
					type: 'piecewise',
					orient: 'horizontal',
					left: 'center',
					top: 25,
				},
				calendar: {
					top: 100,
					left: 30,
					right: 30,
					cellSize: ['auto', 13],
					range: '2016',
					itemStyle: {
						borderWidth: 0.5,
					},
					yearLabel: { show: false },
				},
				series: {
					type: 'heatmap',
					coordinateSystem: 'calendar',
					data: getVirtualData('2016'),
				},
			};

			option && myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},
		getChart6() {
			const myChart = echarts.init(this.$refs.chart6);
			const option = {
				title: {
					show: true,
					text: '航次分布',
					// subtext: "100%",
					textStyle: {
						fontSize: 18,
						color: '#666666',
						fontWeight: 400,
					},
					subtextStyle: {
						fontSize: 27,
						color: '#0168B7',
						fontWeight: 500,
					},
					textAlign: 'center', //图例文字居中显示
					x: '49%', //距离左边的距离
					y: '60%', //距离上边的距离
				},
				grid: {
					show: false,
					left: '3%',
					top: '0%',
					right: '3%',
					bottom: '0%',
				},
				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				legend: {
					show: false,
					top: '5%',
					left: 'center',
					selectedMode: false,
				},
				color: ['#35FFBF', '#1D89D7', '#35EEFF', '#B074F3'],
				series: [
					{
						name: '航次分布',
						type: 'pie',
						radius: ['40%', '70%'],
						center: ['50%', '70%'],
						startAngle: 180,
						label: {
							show: true,
							formatter(param) {
								return param.name + ' ' + param.percent * 2 + '%';
							},
						},

						data: [
							{ value: 1048, name: 'A航次' },
							{ value: 735, name: 'B航次' },
							{ value: 580, name: 'C航次' },
							{ value: 484, name: 'D航次' },
							{
								value: 1048 + 735 + 580 + 484,
								itemStyle: {
									// stop the chart from rendering this piece
									color: 'none',
									decal: {
										symbol: 'none',
									},
								},
								label: {
									show: false,
								},
							},
						],
					},
				],
			};

			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},
		getChart7() {
			const myChart = echarts.init(this.$refs.chart7);
			const option = {
				title: {
					show: true,
					text: '4569万车次',
					// subtext: "100%",
					textStyle: {
						fontSize: 16,
						color: '#666666',
						fontWeight: 400,
					},
					subtextStyle: {
						fontSize: 24,
						color: '#0168B7',
						fontWeight: 500,
					},
					textAlign: 'center', //图例文字居中显示
					x: '49%', //距离左边的距离
					y: '60%', //距离上边的距离
				},
				grid: {
					show: false,
					left: '3%',
					top: '0%',
					right: '3%',
					bottom: '0%',
				},
				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				legend: {
					show: false,
					top: '5%',
					left: 'center',
					selectedMode: false,
				},
				color: ['#35FFBF', '#1D89D7', '#35EEFF', '#B074F3'],
				series: [
					{
						name: '4569万人次',
						type: 'pie',
						radius: ['40%', '70%'],
						center: ['50%', '70%'],
						startAngle: 180,
						label: {
							show: true,
							formatter(param) {
								return param.name + ' ' + param.percent * 2 + '%';
							},
						},

						data: [
							{ value: 1048, name: 'XXXX' },
							{ value: 735, name: 'XXXX' },
							{ value: 580, name: 'XXXX' },
							{ value: 484, name: '其他' },
							{
								value: 1048 + 735 + 580 + 484,
								itemStyle: {
									// stop the chart from rendering this piece
									color: 'none',
									decal: {
										symbol: 'none',
									},
								},
								label: {
									show: false,
								},
							},
						],
					},
				],
			};

			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart8() {
			const myChart = echarts.init(this.$refs.chart8);
			const option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985',
						},
					},
				},
				legend: {
					show: true,
					data: ['2017', '2018', '2019'],
				},

				grid: {
					top: '10%',
					left: '0%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: [
					{
						type: 'category',
						boundaryGap: false,
						axisLabel: {
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
					},
				],
				yAxis: [
					{
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#E5E5E5',
							},
						},
						axisLabel: {
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
					},
				],
				series: [
					{
						name: '2017',
						type: 'line',
						smooth: true,
						itemStyle: {
							normal: {
								color: '#079AAE',
							},
						},

						data: [10, 52, 200, 334, 390, 330],
					},

					{
						name: '2018',
						type: 'line',
						smooth: true,
						itemStyle: {
							normal: {
								color: '#D9726B',
							},
						},
						data: [40, 72, 260, 234, 340, 130],
					},
					{
						name: '2019',
						type: 'line',
						smooth: true,
						itemStyle: {
							normal: {
								color: '#FEAD54',
							},
						},
						data: [60, 32, 210, 29, 240, 190],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},
		getChart9() {
			const myChart = echarts.init(this.$refs.chart9);
			const option = {
				tooltip: { trigger: 'axis' },
				legend: {
					show: true,
					data: ['2017', '2018', '2019'],
				},
				grid: {
					show: false,
					left: '3%',
					top: '15%',
					right: '7%',
					bottom: '13%',
				},
				xAxis: {
					data: ['xxx1', 'xxx2', 'xxx3', 'xxx4', 'xxx5', 'xxx6'],
					axisLabel: {
						textStyle: {
							color: '#999999',
						},
					},
					axisLine: {
						show: true,
						// 坐标轴轴线样式设置
						lineStyle: {
							color: '#999999',
						},
					},
				},
				yAxis: [
					{
						type: 'value',
						name: '',
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#E5E5E5',
							},
						},
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
					},
					{
						type: 'value',
						// name: "客单数",
						splitLine: {
							show: false,
						},
						axisLabel: {
							formatter: '{value} %',
							//y轴文字的配置
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
					},
				],
				series: [
					{
						name: '2017',
						type: 'bar',
						itemStyle: {
							normal: {
								color: 'rgb(50, 65, 87)',
							},
						},

						barWidth: '10',
						data: [10, 52, 200, 334, 390, 330],
					},
					{
						name: '2018',
						type: 'bar',
						itemStyle: {
							normal: {
								color: '#D9726B',
							},
						},

						barWidth: '10',
						data: [10, 52, 200, 334, 390, 330],
					},
					{
						name: '2019',
						type: 'bar',
						itemStyle: {
							normal: {
								color: '#FEAD54',
							},
						},

						barWidth: '10',
						data: [10, 52, 200, 334, 390, 330],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart19() {
			const myChart = echarts.init(this.$refs.chart19);
			var dataArr = 84;
			var colorSet = {
				color: '#468EFD',
			};
			var option = {
				tooltip: {
					formatter: '{a} <br/>{b} : {c}%',
				},

				series: [
					{
						name: '内部进度条',
						type: 'gauge',
						// center: ['20%', '50%'],
						radius: '70%',

						splitNumber: 10,
						axisLine: {
							lineStyle: {
								color: [
									[dataArr / 100, colorSet.color],
									[1, '#111F42'],
								],
								width: 8,
							},
						},
						axisLabel: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: false,
						},
						itemStyle: {
							show: false,
						},
						detail: {
							formatter: function (value) {
								if (value !== 0) {
									var num = Math.round(value);
									return parseInt(num).toFixed(0) + '%';
								} else {
									return 0;
								}
							},
							offsetCenter: [0, 82],
							textStyle: {
								padding: [0, 0, 0, 0],
								fontSize: 18,
								fontWeight: '700',
								color: colorSet.color,
							},
						},
						title: {
							//标题
							show: true,
							offsetCenter: [0, 46], // x, y，单位px
							textStyle: {
								color: '#0164DE',
								fontSize: 14, //表盘上的标题文字大小
								fontWeight: 400,
								fontFamily: 'PingFangSC',
							},
						},
						data: [
							{
								name: '正面：',
								value: dataArr,
							},
						],
						pointer: {
							show: true,
							length: '55%',
							radius: '20%',
							width: 8, //指针粗细
						},
						animationDuration: 4000,
					},
					{
						name: '外部刻度',
						type: 'gauge',
						//  center: ['20%', '50%'],
						radius: '100%',
						min: 0, //最小刻度
						max: 100, //最大刻度
						splitNumber: 10, //刻度数量
						startAngle: 225,
						endAngle: -45,
						axisLine: {
							show: true,
							lineStyle: {
								width: 1,
								color: [[1, 'rgba(0,0,0,0)']],
							},
						}, //仪表盘轴线
						axisLabel: {
							show: true,
							color: '#4d5bd1',
							distance: 25,
							formatter: function (v) {
								switch (v + '') {
									case '0':
										return '0';
									case '10':
										return '10';
									case '20':
										return '20';
									case '30':
										return '30';
									case '40':
										return '40';
									case '50':
										return '50';
									case '60':
										return '60';
									case '70':
										return '70';
									case '80':
										return '80';
									case '90':
										return '90';
									case '100':
										return '100';
								}
							},
						}, //刻度标签。
						axisTick: {
							show: true,
							splitNumber: 7,
							lineStyle: {
								color: colorSet.color, //用颜色渐变函数不起作用
								width: 1,
							},
							length: -8,
						}, //刻度样式
						splitLine: {
							show: true,
							length: -20,
							lineStyle: {
								color: colorSet.color, //用颜色渐变函数不起作用
							},
						}, //分隔线样式
						detail: {
							show: false,
						},
						pointer: {
							show: false,
						},
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},
		getChart10() {
			const myChart = echarts.init(this.$refs.chart10);
			var dataArr = 16;
			var colorSet = {
				color: '#468EFD',
			};
			var option = {
				tooltip: {
					formatter: '{a} <br/>{b} : {c}%',
				},

				series: [
					{
						name: '内部进度条',
						type: 'gauge',
						// center: ['20%', '50%'],
						radius: '70%',

						splitNumber: 10,
						axisLine: {
							lineStyle: {
								color: [
									[dataArr / 100, colorSet.color],
									[1, '#111F42'],
								],
								width: 8,
							},
						},
						axisLabel: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: false,
						},
						itemStyle: {
							show: false,
						},
						detail: {
							formatter: function (value) {
								if (value !== 0) {
									var num = Math.round(value);
									return parseInt(num).toFixed(0) + '%';
								} else {
									return 0;
								}
							},
							offsetCenter: [0, 82],
							textStyle: {
								padding: [0, 0, 0, 0],
								fontSize: 18,
								fontWeight: '700',
								color: colorSet.color,
							},
						},
						title: {
							//标题
							show: true,
							offsetCenter: [0, 46], // x, y，单位px
							textStyle: {
								color: '#0164DE',
								fontSize: 14, //表盘上的标题文字大小
								fontWeight: 400,
								fontFamily: 'PingFangSC',
							},
						},
						data: [
							{
								name: '负面：',
								value: dataArr,
							},
						],
						pointer: {
							show: true,
							length: '55%',
							radius: '20%',
							width: 8, //指针粗细
						},
						animationDuration: 4000,
					},
					{
						name: '外部刻度',
						type: 'gauge',
						//  center: ['20%', '50%'],
						radius: '100%',
						min: 0, //最小刻度
						max: 100, //最大刻度
						splitNumber: 10, //刻度数量
						startAngle: 225,
						endAngle: -45,
						axisLine: {
							show: true,
							lineStyle: {
								width: 1,
								color: [[1, 'rgba(0,0,0,0)']],
							},
						}, //仪表盘轴线
						axisLabel: {
							show: true,
							color: '#4d5bd1',
							distance: 25,
							formatter: function (v) {
								switch (v + '') {
									case '0':
										return '0';
									case '10':
										return '10';
									case '20':
										return '20';
									case '30':
										return '30';
									case '40':
										return '40';
									case '50':
										return '50';
									case '60':
										return '60';
									case '70':
										return '70';
									case '80':
										return '80';
									case '90':
										return '90';
									case '100':
										return '100';
								}
							},
						}, //刻度标签。
						axisTick: {
							show: true,
							splitNumber: 7,
							lineStyle: {
								color: colorSet.color, //用颜色渐变函数不起作用
								width: 1,
							},
							length: -8,
						}, //刻度样式
						splitLine: {
							show: true,
							length: -20,
							lineStyle: {
								color: colorSet.color, //用颜色渐变函数不起作用
							},
						}, //分隔线样式
						detail: {
							show: false,
						},
						pointer: {
							show: false,
						},
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

	},
};
</script>

<style lang="scss" scoped>
.rqfx-box {
	padding: 20px 24px 40px 24px;
	background: #F8F8FF;

	.search-box {
		margin-top: 25px;
		height: 280px;
		background: #ffffff;
		border-radius: 40px;
		box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
		padding: 10px 20px;

		.slider-box {
			margin-top: 25px;
			text-align: center;
		}
		.slider-box img{
			width:100%;
		}
		.sjd-box {
			margin-top: 45px;
			display: flex;
			align-items: center;
			padding: 0 15px;

			.title {
				display: flex;
				align-items: center;
				font-size: 18px;
				font-family: MicrosoftYaHei;
				font-weight: normal;
				text-align: left;
				color: #333333;
			}

			.sjd {
				flex: 1;
				min-width: 0;
				text-align: left;
				.sjdwz {
					padding: 0 25px;
					font-size: 18px;
					font-family: MicrosoftYaHei;
					font-weight: normal;
					color: #333333;
					cursor: pointer;
					user-select: none;
				}
				.active {
					color: #d5665a;
				}
			}
		}
	}

	.section-box {
		margin-top: 25px;
		display: flex;
		justify-content: space-between;
		height: 584px;

		.section-left {
			flex: 1;
			min-width: 0;
			background: #ffffff;
			border-radius: 40px;
			box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
			padding: 10px 0;
			position: relative;

			.mapimg {
				width: 100%;
				height: calc(100% - 20px);
			}
			.m-title {
				padding-left: 20px;
				padding-bottom: 10px;
			}
			.map-type1 {
				position: absolute;
				right: 30px;
				bottom: 10px;

				/* display: flex; */
				overflow: hidden;
				cursor: pointer;
			}
			.map-type {
				position: absolute;
				left: 20px;
				top: 80px;
				background: #ffffff;
				border: 1px solid rgb(50, 65, 87);
				box-shadow: 0px 4px 8px 0px rgba(8, 155, 171, 0.2);
				display: flex;
				border-radius: 20px;
				overflow: hidden;

				.map-type-btn {
					width: 136px;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;

					span {
						padding-left: 9px;
						font-size: 18px;
						font-family: SourceHanSansCN;
						font-weight: normal;
						text-align: left;
						color: rgb(50, 65, 87);
					}
				}
				.active {
					background: rgb(50, 65, 87);
					span {
						color: #fff;
					}
				}
			}
		}

		.section-right {
			margin-left: 25px;
			width: 508px;
			height: 100%;
			background: #ffffff;
			border-radius: 40px;
			box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
			padding: 10px 20px;
			position: relative;

			.chart2 {
				width: 100%;
				height: calc(100% - 30px);
			}
		}
	}

	.section3 {
		height: 400px;

		.chart1 {
			width: 100%;
			height: calc(100% - 30px);
		}
	}

	.section4 {
		margin-top: 25px;
		width: 100%;
		height: 310px;
		background: #ffffff;
		border-radius: 40px;
		box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
		padding: 10px 20px;
		position: relative;
	}

	.section5 {
		height: 310px;

		.section-item {
			width: calc((100% - 75px) / 4);
			height: 100%;
			background: #ffffff;
			border-radius: 40px;
			box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
			padding: 10px 20px;
			position: relative;

			.chart3 {
				width: 100%;
				height: calc(100% - 30px);
			}
		}
	}

	.section6 {
		margin-top: 25px;
		display: flex;
		justify-content: space-between;
		height: 270px;

		.chart8 {
			width: 100%;
			height: calc(100% - 30px);
		}

		.section-item {
			width: calc((100% - 25px) / 2);
			height: 100%;
			background: #ffffff;
			border-radius: 40px;
			box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
			padding: 10px 20px;
			position: relative;
		}
	}

	.section7 {
		height: 370px;
	}
}

.m-title {
	font-size: 20px;
	font-family: SourceHanSansCN;
	font-weight: normal;
	text-align: left;
	color: rgb(50, 65, 87);
}
.box1 {
	border-radius: 4px;
	width: 100px;
	padding: 8px;
	color: rgb(50, 65, 87);
	border: 1px solid rgb(50, 65, 87);
	margin-right: 10px;
}
.box2 {
	border-radius: 4px;
	width: 100px;
	padding: 8px;
	color: #ffffff;
	background-color: rgb(50, 65, 87);
	margin-right: 10px;
}
.box3 {
	border-radius: 4px;
	width: 100px;
	padding: 8px;
	margin-right: 10px;
	background-color: #d9726b;
	color: #ffffff;
}
.box4 {
	border-radius: 4px;
	width: 100px;
	padding: 8px;
	margin-right: 10px;
	background-color: #fead54;
	color: #ffffff;
}
.item-box1 {
	.title {
		color: #fead54;
		font-size: 20px;
		margin-right: 20px;
		margin-left: 50px;
	}
	.nubox {
		display: inline-block;
		.num {
			color: #ffffff;
			background: #fead54;
			padding: 5px 10px;
			border-radius: 4px;
			margin-right: 10px;
			font-weight: 600;
		}
	}
}
.map-container {
	width: 100%;
	height: 100%;
}
.ol-zoom-in,
.ol-zoom-out {
	width: 24px;
	height: 24px;
}
</style>
